<template>
	<qiun-data-charts :ontouch="true" type="column" :opts="state.opts" :chartData="state.chartData" />
</template>

<script setup>
	import {
		watch
	} from 'vue';

	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const state = reactive({
		current: 0,
		chartData: {},
		opts: {
			color: ["#006EF9", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 15, 0, 5],
			enableScroll: true,
			legend: {},
			xAxis: {
				disableGrid: true,
				itemCount:15
			},
			yAxis: {
				data: [{
					min: 0
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 30,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08
				}
			}
		}
	})
	watch(() => props.info, info => {
		getServerData()
	}, {
		deep: true,
		immediate: true
	})

	function getServerData() {
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: props.info?.x_arr || [],
				series: [{
					name: "单量",
					data: props.info?.y_arr || []
				}]
			};
			state.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style>
</style>